﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="Direction.aspx.cs" Inherits="ControlExplorer.C1ProgressBar.Direction" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1ProgressBar"
	TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<wijmo:C1ProgressBar runat="server" ID="Progressbar1" Value="50">
	</wijmo:C1ProgressBar>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>此示例演示如何更改标签的对齐方式，进度的值，
和 C1ProgressBar的方向用客户端脚本动态控制。
</p><br/>
	<p>在此示例使用下面的客户端属性。
</p>
	<ul>
		<li><strong>value </strong>-&nbsp; 用来改变进度值</li>
		<li><strong>fillDirection </strong>- 用来改变进度方向</li>
		<li><strong>labelAlign</strong> -用来改变标签对齐</li>
	</ul>
	<p><strong>值 </strong>属性可以在<strong>最小值
		</strong>和 <strong>最大值</strong>间设置。
		如果的的<strong> labelAlign</strong>属性设置为运行，然后在标签将随着进度指示器运行。

		如果在<strong> fillDirection</strong>设置为东或西，则进度条显示水平，否则，一个垂直显示。

		对于水平进度条，东选项显示从西部到东部进度指示器，

		和西选项显示从东部到西部的进度指示器。

  对于一个垂直的进度栏，北选项表示进度指示器从南到北，
 而南部选项表示从北到南指示。</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<ul>
		<li>
			<label>
				值</label>
			<input type="text" id="value" value="50" />
		</li>
		<li>
			<label>
				标签对齐</label>
			<select id="labelAlign">
				<option value="east">东</option>
				<option value="west">西</option>
				<option value="center" selected="selected">中</option>
				<option value="north">北</option>
				<option value="south">南</option>
				<option value="running">运行</option>
			</select>（如果选择运行，请更改该值） </li>
		<li>
			<label>
				填充方向</label>
			<select id="fillDirection">
				<option value="east">东</option>
				<option value="west">西</option>
				<option value="south">南</option>
				<option value="north">北</option>
			</select>
		</li>
	</ul>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#value").blur(function () {
				if ($(this).val() == "") return;
				var value = parseInt($(this).val());
				$("#<%=Progressbar1.ClientID %>").c1progressbar("option", "value", value);
			});
			$("#labelAlign").change(function () {
				$("#<%=Progressbar1.ClientID %>").c1progressbar("option", "labelAlign", $(this).val());
			});
			$("#fillDirection").change(function () {
				$("#<%=Progressbar1.ClientID %>").c1progressbar("option", "fillDirection", $(this).val());
			});
		});
				
	</script>
</asp:Content>
